<template>
  <view :style="viewColor" class="components-body" v-if="coupon.coupon">
    <view class="coupon-list-window animated" :class="coupon?.status == true ? 'slideInUp' : ''">
      <view class="title">
        <view class="item"
          >{{ couponTitle }}<text class="iconfont icon-guanbi" @tap="close"></text
        ></view>
      </view>
      <block v-if="couponArr?.length">
        <view class="coupon-list">
          <view
            class="item acea-row row-center-wrapper"
            :class="item?.disabled ? 'disabled' : ''"
            v-for="(item, index) in couponArr"
            v-show="item?.source_from == type"
            @click="getCouponUser(index, item)"
            :key="index"
          >
            <view
              v-if="item?.coupon?.send_type == 20"
              class="money acea-row row-column row-center-wrapper vip-coupon"
            >
              <view
                >￥<text class="num">{{ item?.coupon_price }}</text></view
              >
              <view class="pic-num">满{{ item?.use_min_price }}元可用</view>
            </view>
            <view
              v-else
              class="money acea-row row-column row-center-wrapper"
              :style="{ 'background-image': `url(${domain}/static/diy/couponBg${keyColor}.png)` }"
            >
              <view
                >￥<text class="num">{{ item?.coupon_price }}</text></view
              >
              <view class="pic-num">满{{ item?.use_min_price }}元可用</view>
            </view>
            <view class="text">
              <view class="condition line1">
                <span class="line-title" v-if="item?.coupon?.type === 0">店铺券</span>
                <span class="line-title" v-if="item?.coupon?.type === 10">新人券</span>
                <span class="line-title" v-else-if="item?.coupon?.type === 1">商品券</span>
                <span>{{ item?.coupon_title }}</span>
              </view>
              <view class="data acea-row row-between-wrapper">
                <view>{{ timeYMD(item?.start_time) }} ~ {{ timeYMD(item?.end_time) }}</view>
                <view class="iconfont icon-weixuanzhong" v-if="!item?.checked"></view>
                <view class="iconfont icon-xuanzhong1" v-else></view>
              </view>
            </view>
          </view>
        </view>
        <view class="foot-box">
          <view class="left">
            已选择{{ coupon_number }}张，可优惠<text>￥{{ coupon_amount }}</text>
          </view>
        </view>
      </block>
      <!-- 无优惠券 -->
      <view class="pictrue" v-else>
        <image src="@/static/shop/noCoupon.png"></image>
      </view>
    </view>
    <!-- <view
      class="mask"
      catchtouchmove="true"
      :hidden="coupon?.status == false"
      @click="close"
    ></view> -->
  </view>
</template>
<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------

// import { mapGetters } from "vuex";
import { HTTP_REQUEST_URL } from '@/config/app'
export default {
  props: {
    coupon: {
      type: Object,
      default: function () {
        return {}
      },
    },
    coupon_amount: {
      type: Number,
    },
    type: {
      type: Number,
    },
    coupon_number: {
      type: Number,
    },
    couponTitle: {
      type: String,
      default: '优惠券',
    },
    domain: {
      type: String,
      default: HTTP_REQUEST_URL(),
    },
  },
  filters: {
    timeYMD: function (value) {
      console.log(value)
      if (value) {
        var newDate = /\d{4}-(\d{1,2}\d{1,2}-\d{1,2}\d{1,2})/g.exec(value)
        return newDate?.[0] || ''
      }
    },
  },
  // computed: mapGetters(['viewColor','keyColor']),
  data() {
    return {
      // domain: HTTP_REQUEST_URL,
      couponArr: [],
      couponData: {},
      // 选中的数据存放
      active: {},
      allNum: 0,
      allCouponNum: 0,
      // 选中店铺优惠券id
      use_store_coupon: 0,
      // 单个店铺总价
      pay_price: 0,
      // 商品有优惠订单
      goodsOrder: '',
      viewColor:
        '--view-theme: #E93323;--view-assist:#FF7612;--view-priceColor:#E93323;--view-bgColor:rgba(255, 118, 18,.1);--view-minorColor:rgba(233, 51, 35,.1);--view-bntColor11:#FDA923;--view-bntColor12:#FD6523;--view-bntColor21:#F11B09;--view-bntColor22:#F67A38;',
      keyColor: '_default',
      // timeYMD:''
    }
  },
  watch: {
    coupon: {
      handler(nVal, oVal) {
        this.couponArr = JSON.parse(JSON.stringify(nVal.coupon))
      },
      immediate: true,
      deep: true,
    },
  },
  mounted() {
    this.couponData = this.coupon
    // 深拷贝数据 不影响原来数据使用
    this.couponArr = JSON.parse(JSON.stringify(this.coupon.coupon))
    // 深拷贝数据 不影响原来数据使用
    // this.goodsOrder = JSON.parse(JSON.stringify(this.coupon.order))
    let tempObj = (this.active[this.couponData.mer_id] = {})
    tempObj.product = []
    tempObj.store = ''
    // let newDate=/\d{4}-(\d{1,2}\d{1,2}-\d{1,2}\d{1,2})/g.exec(value)
    // this.timeYMD=newDate?.[0]||'';
  },
  methods: {
    close: function () {
      this.$emit('ChangCouponsClone')
    },
    // 使用优惠券
    getCouponUser: function (index, item) {
      this.$emit('getCoupon', item)
    },
    timeYMD(value) {
      var newDate = /\d{4}-(\d{1,2}\d{1,2}-\d{1,2}\d{1,2})/g.exec(value)
      return newDate?.[0] || ''
    },
  },
}
</script>

<style scoped lang="scss">
@import '@/styles/shop.scss';

.animated {
  animation-duration: 0.3s;
}

.title {
  display: flex;

  .item {
    position: relative;
    flex: 1;
    font-size: 28rpx;
    color: #999999;

    &::after {
      content: ' ';
      position: absolute;
      left: 50%;
      bottom: 18rpx;
      width: 50rpx;
      height: 5rpx;
      background: transparent;
      border-radius: 3px;
      transform: translateX(-50%);
    }

    &.on {
      color: #282828;

      &::after {
        background: var(--view-theme);
      }
    }
  }
}

.coupon-list {
  padding: 30rpx;

  // background: red;
  .item {
    box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.06);

    &.disabled {
      pointer-events: none;
      opacity: 0.6;

      .iconfont {
        background-color: #eee;
        border-radius: 100%;
      }
    }
  }
}

.components-body {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 555;
  display: flex;
  align-items: flex-end;
}

.coupon-list-window {
  // position: fixed;
  // top: -400rpx;
  // left: 0;
  // width: 100%;
  position: relative;
  background-color: #fff;
  border-radius: 16rpx 16rpx 0 0;
  z-index: 29;
  transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
  padding-bottom: 100rpx;
  padding-bottom: calc(100rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
}

.coupon-list-window.on {
  animation: aminup;
}

.coupon-list-window .title {
  height: 106rpx;
  width: 100%;
  text-align: center;
  line-height: 106rpx;
  font-size: 32rpx;
  font-weight: bold;
  position: relative;
  border: 1px solid #f5f5f5;
}

.coupon-list-window .title .iconfont {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  font-size: 35rpx;
  color: #8a8a8a;
  font-weight: normal;
}

.coupon-list-window .coupon-list {
  margin: 0 0 0rpx 0;
  height: 650rpx;
  overflow: auto;
}

.coupon-list-window .pictrue {
  width: 414rpx;
  height: 336rpx;
  margin: 0 auto 50rpx auto;
}

.coupon-list-window .pictrue image {
  width: 100%;
  height: 100%;
}

.pic-num {
  color: #fff;
  font-size: 24rpx;
}

.line-title {
  width: 90rpx;
  padding: 0 10rpx;
  box-sizing: border-box;
  background: rgba(255, 247, 247, 1);
  border: 1px solid var(--view-theme);
  opacity: 1;
  border-radius: 20rpx;
  font-size: 20rpx;
  color: var(--view-theme);
  margin-right: 12rpx;
}

.line-title.gray {
  border-color: #bbb;
  color: #bbb;
  background-color: #f5f5f5;
}

.foot-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  padding: 0 30rpx;
  border-top: 1px solid #f5f5f5;

  .btn {
    width: 240rpx;
    height: 70rpx;
    line-height: 70rpx;
    text-align: center;
    background: var(--view-theme);
    border-radius: 35rpx;
    color: #fff;
    font-size: 30rpx;
  }

  .left {
    text {
      color: var(--view-priceColor);
    }
  }
}

.coupon-list .item .text .data .iconfont {
  font-size: 36rpx;

  &.icon-weixuanzhong {
    color: #bfbfbf;
  }

  &.icon-xuanzhong1 {
    color: var(--view-theme);
  }
}
</style>
